import React, { useMemo } from 'react';
import { Tag,  } from 'antd';
import dayjs from 'dayjs';
import { CheckCircleFilled, FieldTimeOutlined, QuestionCircleFilled, UserOutlined } from '@ant-design/icons';
const dateFormat = 'YYYY-MM-DD';

export type StatusTagProps = {
  checkPercent: number | undefined;
  checkTime: Date | undefined;
  checkAuto: boolean | undefined;
  checkInterval: number | undefined;
  displayPrefix?: boolean;
  checkFalse: number | undefined;
};

export const StatusTag: React.FC<StatusTagProps> = (props) => {
  const { checkPercent,checkTime,checkInterval,checkAuto,displayPrefix,checkFalse } = props;
  

  const renderTag = useMemo(() => {
    let txtColor = '';
    let txtDay = '大于7天';
    let txtTime = '';
    if (checkPercent == 100) {
      let checkDayText = '';
      let today = dayjs(new Date()).format(dateFormat);
      let yesterday = dayjs(new Date()).add(-1, 'days').format(dateFormat);
      let before_yesterday = dayjs(new Date()).add(-2, 'days').format(dateFormat);
  
      let date = dayjs(checkTime);
      let dateNow = dayjs(new Date());
      txtTime = date.format('HH:mm:ss');
      checkDayText = date.format(dateFormat);
      txtColor = 'cyan';
  
      if (today == checkDayText) {
        txtDay = '今天';
        let hour = date.hour() + (checkInterval ?? 4);
        if (hour > dateNow.hour()) {
          txtColor = 'success';
        } else if (hour == dateNow.hour()) {
          if (date.minute() >= dateNow.minute()) {
            txtColor = 'success';
          }
        }
      } else if (yesterday == checkDayText) {
        txtDay = '昨天';
      } else if (before_yesterday == checkDayText) {
        txtDay = '前天';
      } else {
        txtDay = dayjs(checkTime).format('MM-DD');
      }
    } else if (checkTime) {
      txtDay = '检测中';
      txtTime = dayjs(checkTime).format('MM-DD HH:mm:ss');
      txtColor = 'orange';
    }

    return (<>
      <Tag color={txtColor}>
      {checkAuto == true ? <FieldTimeOutlined /> : <UserOutlined />}
      &nbsp;{displayPrefix == true ? '检测 ' : ''}{txtDay} {txtTime}
      {checkPercent == 100 ? (checkFalse > 0 ? (
          <QuestionCircleFilled style={{ color: 'orange' }} />
        ) : (
          <CheckCircleFilled style={{ color: 'green' }} />
        )
      ) : (
        ''
      )}
      </Tag>
    </>);
  }, [checkPercent,checkTime,checkInterval,checkAuto,checkFalse]);

  return <>{renderTag}</>;
};


export default StatusTag;
